<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #header {
            height: 50px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 20px;
        }
        #messageTip {
            cursor: pointer;
            position: relative;
        }
        #messageTip::after {
            content: attr(data-count);
            position: absolute;
            right: -10px;
            top: -10px;
            background-color: red;
            color: white;
            padding: 5px;
            border-radius: 50%;
        }
        #messageList {
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            width: 200px;
        }
    </style>

    <script>
        var messageTip = document.getElementById('messageTip');
        var messageList = document.getElementById('messageList');

        messageTip.addEventListener('click', function() {
            if (messageList.style.display === 'none') {
                messageList.style.display = 'block';
            } else {
                messageList.style.display = 'none';
            }
        });

        // 假设我们有一个函数fetchUnreadMessages，它会返回一个Promise，解析为未读消息的数组
        fetchUnreadMessages().then(function(messages) {
            messageTip.setAttribute('data-count', messages.length);
            messages.forEach(function(message) {
                var listItem = document.createElement('p');
                listItem.textContent = message;
                messageList.appendChild(listItem);
            });
        });
    </script>
</head>
<body>
<div id="header">
    <div id="messageTip" data-count="0">Messages</div>
</div>
<div id="messageList"></div>
</body>
</html>